import render_helper from "./render_helper.mjs";
import render_content from "./render_content.mjs";
import thin_ajax from "./thin_ajax.mjs";
import datarover from "./datarover.mjs";
import { thin } from "../thin3.mjs";
import select_template from "./select_template.mjs";
import { clearafterqueue } from "./delay_render.mjs";
import { nearest_data } from "./nearest.mjs";

export default function input_template(container, template) {
  // console.log({ container, template });

  // 根据模板类型选择不同的处理方式
  switch (template.type) {
    case "select": // 处理选择框类型
      select();
      break;
    case "file": // 处理文件上传类型
      file();
      break;
    default:
      // 检查模板的a属性类型
      switch (template?.a?.type) {
        case "file":
          file();
          break;
        default:
          input();
          break;
      }
      break;
  }

  // 处理选择框类型的函数
  function select() {
    console.log("select");
    select_template(container, { ...template, ...{ select: template.input } });
  }

  // 处理文件上传类型的函数
  function file() {
    let files = document.createElement("files");
    container.appendChild(files);
    let list = document.createElement("list");
    files.appendChild(list);
    render_filelist(list, template);
    let input = document.createElement("input");
    input.type = "file";
    input.multiple = template.multiple; // 是否允许多文件上传
    input.thin_path = template.path;
    files.appendChild(input);
    render_helper(input, template);
    input.name = template.input;
  }

  function render_filelist(container, template) {
    console.log({ container, template });
  }

  // 处理普通输入框类型的函数
  function input() {
    let input = document.createElement("input");
    container.appendChild(input);

    // 执行输入框创建前的回调函数
    template?.before?.({ container: input, data: nearest_data(input) });

    let required;

    // 处理必填属性
    if (template.required === false) {
      required = {};
    } else if (container.closest("formview")?.thin_allrequired === true) {
      required = { required: true };
    }

    // console.log({ required });
    template.a = { ...template.a, ...required };

    render_helper(input, template);
    input.name = template.input;
    if (template.type) input.type = template.type;

    // 执行输入框创建后的回调函数
    template?.after?.({ container: input, data: nearest_data(input) });

    // 处理AJAX自动完成功能
    if (template.ajax) {
      input.setAttribute("autocomplete", "off");
      let uuid = thin.uuid();
      let datalist = document.createElement("datalist");
      datalist.id = uuid;
      container.appendChild(datalist);

      input.setAttribute("list", uuid);

      // 监听输入事件
      input.addEventListener("input", (ev) => {
        console.log(ev);
        updatelist(input.value);
      });

      // 监听其他相关元素的变化
      if (template.ajax.watch) {
        // console.log(template.ajax.watch);
        document.querySelectorAll(template.ajax.watch).forEach((element) => {
          // console.log({ element });
          element.addEventListener("change", (ev) => {
            updatelist(input.value);
          });
        });
      }

      let ajax;

      updatelist(input.value);

      // 更新数据列表的函数
      function updatelist(search) {
        if (ajax) ajax.abort(); // 终止之前的请求

        let query = {};

        // 处理查询参数
        for (let key in template.ajax.query) {
          // console.log(key);
          query[key] = render_content(container, template.ajax.query[key]);
          // console.log(query);
        }
        console.log({ search });

        // 发送AJAX请求获取数据
        ajax = thin_ajax({
          url: template.ajax.url,
          type: template.ajax.method,
          data: { ...query, ...{ filter: { search: search } } },
          success: (data) => {
            let opt = datarover(data, template.ajax.datapath);
            thin(datalist).empty();
            // console.log({ data, opt });
            if (Array.isArray(opt)) {
              opt.forEach((op) => {
                let value = /\[\[[\w/.]+\]\]/.test(template.ajax.value)
                  ? render_content(op, template.ajax.value)
                  : datarover(op, template.ajax.value);
                let text = render_content(
                  op,
                  template.ajax.text || template.ajax.value
                );
                let option = new Option(text, value);
                datalist.appendChild(option);
              });
            }
          },
          error: (err) => {
            console.log({ err });
          },
        });
      }
    }
  }
}
